<template>
  <yd-layout class="m-member-manage">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" :title="memberInfo.type == 'purchaser' ? '采购商申请' : '供应商申请'" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-ct-bg m-member-manage-ct">
      <yd-cell-group ref="inputGroup">
        <yd-cell-item>
          <span slot="left">公司名称</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.company" 
            placeholder="请输入公司名称"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,15}$"
            max="15"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">营业执照号</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.licenseNumber" 
            placeholder="请输入营业执照号"
            regex="^\w{15}$|^\w{18}$"
            max="18"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">企业类型</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.enterpriseType" 
            placeholder="请输入企业类型"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,6}$"
            max="6"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">员工人数</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.employeesNum" 
            placeholder="请输入员工人数"
            regex="^\d{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <div class="u-gap"></div>
        <yd-cell-item v-if="memberInfo.type == 'supplier'">
          <span slot="left">店铺介绍</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.shopIntroduction" 
            placeholder="请输入店铺介绍"
            max="200"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">主营行业</span>
          <yd-input slot="right" required readonly
            type="text" 
            v-model="memberInfo.mainIndustry" 
            placeholder="请选择主营行业"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false"
            @click.native="tradeShow = true">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">产品风格</span>
          <yd-input slot="right" required readonly
            type="text" 
            v-model="memberInfo.productStyle" 
            placeholder="请选择产品风格"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false"
            @click.native="styleShow = true">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">主营产品</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.mainProducts" 
            placeholder="请输入主营产品"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">主要客户群体</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.mainCustomerGroups" 
            placeholder="请输入主要客户群体"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item v-if="memberInfo.type == 'purchaser'">
          <span slot="left">月销售额</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.monthSales" 
            placeholder="请输入月销售额"
            regex="^\d{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item v-if="memberInfo.type == 'supplier'">
          <span slot="left">月产量</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.monthProduction" 
            placeholder="请输入月产量"
            regex="^\d{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">年销售额</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.yearSales" 
            placeholder="请输入年销售额"
            regex="^\d{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item v-if="memberInfo.type == 'supplier'">
          <span slot="left">年出口额</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.yearExportNum" 
            placeholder="请输入年出口额"
            regex="^\d{1,10}$"
            max="10"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <div class="u-gap"></div>
        <yd-cell-item>
          <span slot="left">所在地</span>
          <yd-input slot="right" required readonly
            type="text"
            v-model="memberInfo.area" 
            placeholder="请选择所在地"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false"
            @click.native="addressShow = true">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">详细地址</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.detailAddress" 
            placeholder="请输入详细地址"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{5,30}$"
            max="30"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">业务联系人</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.businessContacts" 
            placeholder="请输入业务联系人"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,15}$"
            max="15"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">联系人电话</span>
          <yd-input slot="right" required
            type="text" 
            v-model="memberInfo.contactPhone" 
            placeholder="请输入联系人电话"
            regex="mobile"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <yd-button-group>
        <yd-button size="large" type="primary" @click.native="onSubmit">提交</yd-button>
      </yd-button-group>
    </div>

    <yd-actionsheet :items="aTradeList" v-model="tradeShow" v-if="aTradeList.length"></yd-actionsheet>
    <yd-actionsheet :items="styleList" v-model="styleShow" v-if="aTradeList.length"></yd-actionsheet>
    <yd-cityselect :items="areaList" v-model="addressShow" :callback="addressPicker" v-if="areaList.length"></yd-cityselect>
  </yd-layout>
</template>

<script>
  import { apiMemberNew } from 'js/api'
  import { mapGetters, mapActions } from 'vuex'
  import { session } from 'util/storage'

  export default {
    data() {
      return {
        addressShow: false,
        tradeShow: false,
        styleShow: false,
        styleList: [],
        aTradeList: [],
        memberInfo: {
          company: '',
          licenseNumber: '',
          enterpriseType: '',
          employeesNum: '',
          mainIndustryId: '',
          productStyleId: '',
          productStyle: '',
          mainIndustry: '',
          mainProducts: '',
          mainCustomerGroups: '',
          yearSales: '',
          quId: '',
          detailAddress: '',
          businessContacts: '',
          contactPhone: '',
          mainSalesChannels: '',
          monthSales: '',
          shopIntroduction: '',
          monthProduction: '',
          yearExportNum: '',
          area: ''
        }
      }
    },
    created() {
      // 获取地址
      this.fetchArea()
      // 获取行业
      this.fetchTradeList({
        callback: () => {
          this.tradeIdList.forEach(trade => {
            this.aTradeList.push({
              label: trade.label,
              id: trade.id,
              callback: data => {
                this.memberInfo.mainIndustry = data.label
                this.memberInfo.mainIndustryId = data.id
                this.selectStyleByTradeId(data.id)
              }
            })
          })
        }
      })
      const oMemberInfo = session.get('memberInfo') || {}
      if (oMemberInfo.type) {
        this.memberInfo = Object.assign({}, this.memberInfo, oMemberInfo)
      } else {
        this.memberInfo.type = this.$route.query.type
      }
      console.log(this.memberInfo)
    },
    methods: {
      ...mapActions(['fetchArea', 'fetchTradeList']),
      addressPicker(data) {
        this.memberInfo.quId = data.itemValue3
        this.memberInfo.area = `${data.itemName1}/${data.itemName2}/${data.itemName3}`
      },
      selectStyleByTradeId(id) {
        let aStyle = []
        for (let idx in this.tradeList) {
          const oTrade = this.tradeList[idx]
          if (oTrade.id == id) {
            aStyle = oTrade.styles
            break
          }
        }
        aStyle.forEach(style => {
          this.styleList.push({
            label: style.title,
            id: style.id,
            callback: data => {
              this.memberInfo.productStyle = data.label
              this.memberInfo.productStyleId = data.id
            }
          })
        })
      },
      onSubmit() {
        const oInputGroup = this.$refs.inputGroup
        let isTrue = true
        oInputGroup.$children.forEach(item => {
          const oInput = item.$children[0]
          if (oInput.errorMsg) {
            isTrue = false
            this.$toast(oInput.errorMsg, () => {
              oInput.$el.children[0].focus()
            })
          }
        })
        if (!isTrue) return
        this.memberInfo.mainIndustryId = this.memberInfo.mainIndustryId + ''
        apiMemberNew(this.token, this.memberInfo).then(data => {
          this.$router.replace(`/member/pay?type=${this.memberInfo.type}&status=pay&id=${data.applyId ? data.applyId : this.memberInfo.id}`)
        })
      }
    },
    computed: {
      ...mapGetters(['token', 'areaList', 'tradeList', 'tradeIdList'])
    }
  }
</script>

<style lang="scss">
  .m-member-manage-ct {
    .yd-cell-box {
      input {
        text-align: right;
      }
    }
  }
</style>